<template>
    <div class="rightonewrap">
        <div class="title">业务系统告警数据</div>
        <div class="swiperbox">
            <swiper :options="swiperaptions">
                    <swiper-slide class="boxitem" v-for="(page, index) in pages" :key="index">
                        <RightOnePer class="per" v-for="(per,i) in page" :key="'per'+i" :per="page[i]" />
                    </swiper-slide>
                    <div class="swiper-pagination db-pagination" slot="pagination"></div>
            </swiper>
        </div>
        <div class="legend">
            <img class="img" src="../assets/icons/hint _red.png" alt=""><span class="redlegend">严重</span>
            <img class="img" src="../assets/icons/hint_orange.png" alt=""><span class="orangelegend">主要</span>
            <img class="img" src="../assets/icons/hint_yellow.png" alt=""><span class="yellowlegend">次要</span>
            <img class="img" src="../assets/icons/hint_blue.png" alt=""><span class="bluelegend">告警</span>
        </div>      
    </div>
</template>

<script>
import {getRightOne} from "../assets/api/twoapi"
import RightOnePer from '../components/RightOnePer'
export default {
    data() {
        return {
            swiperaptions: {
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false
                },
                pagination: {
                    el: '.db-pagination',
                    bulletClass: 'my-bullet',
                    bulletActiveClass: 'my-bullet-active',
                    clickable: true 
                },
                timer:null,
            }, systems:[],
        }
    },
    components:{
        RightOnePer
    },
    mounted(){
        this.fetchData()
        this.timer = setInterval(() => {
        this.fetchData()
        }, this.howtimeout)
    },
    computed: {
        pages() {
        let index = 0
        let data = []
        this.systems.forEach((item, i) => {
            if (i !== 0 && i % 12 === 0) {
            index++
            }
            if (data[index] === undefined) {
            data[index] = []
            }
            data[index].push(item)
        })
        return data
        }
        
    },
    methods:{
        fetchData() {
            getRightOne().then((res)=>{
                this.systems=res.data.result;
            });
        },
        
    },
    destroyed() {
        clearInterval(this.timer)
    },
}
</script>

<style>
.db-pagination{
  top: 445px !important;
}
 .my-bullet{
  width: 12px; 
  height: 12px; 
  display: inline-block; 
  border: solid 1px #00ffff;
  margin: 0 4px; 
  border-radius: 100%;
}
.my-bullet-active{
  background: #00ffff; 
} 
.rightonewrap{
    width: 892px;
    height: 542px;
    text-align: center;
    padding-top: 23px;
    overflow:hidden; 
    position: relative;
    margin: 0 16px;
}
.title {
    color: #a3d7ff;
    font-size: 26px;
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    letter-spacing: 1px;
    padding-bottom: 7px;
    margin: 0 auto;
}
.swiperbox{
    width: 836px;
    margin: 0 auto;
}
.boxitem {
        width: 836px;
        display: flex;
        flex-wrap: wrap;
        /* margin-left: 21px; */
        margin-bottom: 46px;
} 
.legend {
    font-size: 14px;
    text-align: left;
    margin-left: 18px;
    padding-bottom: 200px;
    position: absolute;
    top: 510px;
}
.img {
    vertical-align: middle;
    margin-right: 5px;
    margin-left: 24px;
}
.redlegend{
    color: #e51919;
}
.orangelegend{
    color: #ce6c1d;
}
.yellowlegend{
    color: #d6d831;
}
.bluelegend{
    color: #46d3ff;
}
</style>